<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { ElMessageBox, ElMessage } from "element-plus"
import {takeAccessToken} from "@/api/login"
import axios from "axios"
import {decodeJwtPayload} from "@/api/role";

const recordDate = ref([]) // 初始化空数组
const role = ref(null)

function getRole(){
  // 存储token的名字
  const authItemName = "access_token"
  // 取出token进行操作
  const authString = localStorage.getItem(authItemName) || sessionStorage.getItem(authItemName) || null
  // 使用JSON.parse方法将JSON字符串解析为JavaScript对象
  const authObj = JSON.parse(authString)
  // 解析值
  const authInfo = decodeJwtPayload(authObj.token)

  // 赋值
  role.value = authInfo.authorities[0]
  // console.log(role.value)
}

// 函数
function getStuApp(){
  // 从后端请求数据 -- 学生端 根据stuid来 获取数据 -- 校医端根据日期来获取数据 -- 管理员端则显示全部
  axios.get('api/appoint/lists',{
    headers: {
      'Authorization': `Bearer ${takeAccessToken()}`
    }
  })
  .then((res) => {
    // console.log(res, '含id')
    recordDate.value = [...res.data.data]
    // console.log(recordDate.value[0].appid)
  })
  .catch((err) => {
    console.log(err)
  })
}

// 在组件被 <keep-alive> 激活时执行获取数据的操作
onActivated(() => {
  getRecord();
});

// 展示
async function getRecord(){
  try {
    // 判断是否是学生
    if(role.value === 'ROLE_stu'){
      await getStuApp()
    } else {
      await axios.get('/api/appoint/listAll', {
        headers: {
          'Authorization': `Bearer ${takeAccessToken()}`
        }
      })
      .then((res) => {
        console.log(res.data.data)
        recordDate.value = [...res.data.data]
        ElMessage.success(res.data.message)
        // console.log(recordDate.value)
      })
      .catch((err) => {
        console.log(err)
      })
    }

  } catch (error) {
    console.error(error);
    // 这里可以添加错误处理逻辑，比如显示一个错误消息
  }
}

// 页面渲染即获取数据
onMounted(async () => {
  getRole()
  // await getRecord()
})

// 取消预约 - 参数row
function cancelReservation(row) {
  // console.log(row.appid)

  ElMessageBox.confirm('确认取消预约吗？', '警告信息', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  .then(action => {

    // 确认取消
    if(action === 'confirm'){
      ElMessageBox.prompt('请输入取消原因：', '取消原因', {
        inputValidator: (value) => {
          // 确保输入只包含汉字
          if (!/^[\u4e00-\u9fa5，。、？！；：“”]+$/.test(value)) {
            return '只能输入汉字和常用字符';
          }
          // 确保汉字长度大于10
          if (value.length < 10) {
            return '输入内容必须大于10个汉字';
          }
          return true;
        },
      inputErrorMessage: '请输入取消原因'
      })
      .then(() => {
        // console.log()
        axios.put(`/api/appoint/cancel/${row.appid}`, '' ,{
          headers: {
            'Authorization': `Bearer ${takeAccessToken()}`
          }
        })
        .then((res) => {
          // console.log(res)
          ElMessage.success(res.data.data)
          getRecord()
        })
        .catch((err) => {
          console.log(err)
        })
      })
      .catch((err) => {
        console.log(err);
      });
    }
  }).catch((err) => {
    console.log(err);
  });

}

const todayRecords = ref([]); // 用于存储今天的记录

// 今天预约
function todayRecord(){
  const today = new Date()
  today.setHours(0, 0, 0, 0) // 将今天的时间设为0点
  // console.log(today.toDateString())

  todayRecords.value = recordDate.value.filter(record => {
    const recordDate = new Date(record.apptime)
    // console.log(recordDate.toDateString())
    recordDate.setHours(0, 0, 0, 0) // 将记录的时间也设为0点，以便比较日期部分
    return recordDate.toDateString() === today.toDateString(); // 比较日期部分是否相同
  })
  recordDate.value = todayRecords.value
}

</script>

<template>
  <el-card class="box-card">

    <el-table :data="recordDate" style="font-size: 16px" max-height="350">
      <el-table-column v-if="role === 'ROLE_doc'" prop="username" label="预约人"></el-table-column>
      <el-table-column prop="apptime" label="预约时间"></el-table-column>
      <el-table-column prop="status" label="预约状态">
        <template v-slot="scope">
            <span
                style="vertical-align: middle;"
                :style="{color: scope.row.status === 1 ? 'red' : '',
                backgroundColor: scope.row.status === 1 ? '#ccc' : '',
                }">
              {{ scope.row.status === 1 ? '预约成功' : '预约取消' }}
            </span>

          <el-button
              style="font-size: 16px;margin-left: 18px;"
              v-if="scope.row.status === 1 && role === 'ROLE_stu'"
              type="text"
              @click="cancelReservation(scope.row)">
            取消预约
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <div v-if="role === 'ROLE_doc'">
      <el-button style="margin-top: 18px" type="primary" @click="todayRecord">今天预约</el-button>
      <el-button style="margin-top: 18px" type="primary" @click="getRecord()">所有预约</el-button>
    </div>


  </el-card>
</template>

<style scoped>

</style>